<template>
	<div class="task_risk">
		<div class="task_risk_header">
			<div class="task_risk_header_title">作业风险</div>
			<div class="task_risk_header_right">
				<div style="float: left; margin-right: 50px;">
					风险总数: {{fxData.statistics.total}}项
				</div>
				<div style="display:inline-block">
					<div>
						<!-- <span class="fxlevel first"></span> -->
						<span style="margin-right:15px">I&nbsp; 级风险: {{fxData.statistics.firstLevel}}项 </span>
						<!-- <span class="fxlevel second"></span> -->
						<span>II级风险: {{fxData.statistics.secondLevel}}项</span>
					</div>
					<div style="margin-top:5px">
						<!-- <span class="fxlevel third"></span> -->
						<span style="margin-right:15px">III级风险: {{fxData.statistics.thirdLevel}}项</span>
						<!-- <span class="fxlevel fourth"></span> -->
						<span>IV级风险: {{fxData.statistics.fourthLevel}}项</span>
					</div>
				</div>
			</div>
		</div>
		<div style="width: 100%;height:calc(100% - 40px);">
			<bar-echarts :btnhidden="btnHidden" @barclick="zyfxClik" @barbtnchange="getZyfxData" barid="zyfxId" :barx="fxData.xData"
			 :bary="fxData.yData"></bar-echarts>
		</div>
	</div>
</template>


<script>
	import BarEcharts from '%/modules/bi/BarEcharts'
	export default {
		name: 'bi-zyfx',
		components: {
			BarEcharts
		},
		created() {
			//集团用户
			this.btnHidden = this.personType === 1 ? false : true;
			this.getZyfxData(0);
		},
		mounted() {},
		data() {
			return {
				userDetail: JSON.parse(localStorage.getItem('userList')),
				personType: JSON.parse(localStorage.getItem('personType')),
				// 作业风险
				fxData: {
					statistics: {},
					xData: [],
					yData: {
						firstRisk: [],
						secondRisk: [],
						thirdRisk: [],
						fourthRisk: []
					}
				}
			}
		},
		methods: {

			// 获取作业风险
			getZyfxData(index, flag, fxDetailData) {

				let reqData = {
					"enterpriseId": flag == "detail" ? index : this.userDetail.enterpriseId,
					"source": flag == "detail" ? 1 : this.personType === 1 ? 0 : 1,
					"type": flag == "detail" ? "" : index,
				}
				this.$api.bi.getZyfxData(reqData).then(res => {
          // 集团用户
          if (flag == "detail") {
          	fxDetailData.xData = [];
          	fxDetailData.yData = {
          		firstRisk: [],
          		secondRisk: [],
          		thirdRisk: [],
          		fourthRisk: []
          	};
          } else {
          	this.fxData.xData = [];
          	this.fxData.yData = {
          		firstRisk: [],
          		secondRisk: [],
          		thirdRisk: [],
          		fourthRisk: []
          	};
          }
					if (res.code === 200) {
						if (flag == "detail") {
							fxDetailData.statistics = res.data;
							res.data.statisticsDetail.forEach((item) => {
								fxDetailData.xData.push(item.name);
								fxDetailData.yData.firstRisk.push(item.firstLevel);
								fxDetailData.yData.secondRisk.push(item.secondLevel);
								fxDetailData.yData.thirdRisk.push(item.thirdLevel);
								fxDetailData.yData.fourthRisk.push(item.fourthLevel);
							})
						} else {
							this.fxData.statistics = res.data;
							res.data.statisticsDetail.forEach((item) => {
								this.fxData.xData.push(item.name);
								this.fxData.yData.firstRisk.push(item.firstLevel);
								this.fxData.yData.secondRisk.push(item.secondLevel);
								this.fxData.yData.thirdRisk.push(item.thirdLevel);
								this.fxData.yData.fourthRisk.push(item.fourthLevel);
							})
						}

					} else {
						this.$Message.error(res.message);
            // 集团用户
            if (flag == "detail") {
            	fxDetailData.xData = [];
            	fxDetailData.yData = {
            		firstRisk: [],
            		secondRisk: [],
            		thirdRisk: [],
            		fourthRisk: []
            	};
            } else {
            	this.fxData.xData = [];
            	this.fxData.yData = {
            		firstRisk: [],
            		secondRisk: [],
            		thirdRisk: [],
            		fourthRisk: []
            	};
            }
					}
				})
			},

			// 作业风险点击
			zyfxClik(index, value) {
				let orgId = this.fxData.statistics.statisticsDetail[index].id;
        console.log(index)
				let jumpUrl =  this.fxData.statistics.statisticsDetail[index].type == 1?"general-identification-ledger":"dynamic-identification-ledger";
				if (this.personType == 1) {
					this.$emit('zyfxclick', orgId, value)
				} else {

					this.$router.push({
						name: jumpUrl,
						query: {
							orgId: this.userDetail.enterpriseId,
							projectId: orgId
						}
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.task_risk {
			height: 100%;
			position: relative;
			box-sizing: border-box;
			padding: 18px;

			.task_risk_header {
				width: 100%;
				height: 40px;

				.fxlevel {
					display: inline-block;
					width: 7px;
					height: 7px;
					margin-right: 5px;
					margin-top: 5px;

					&.first {
						background: #ED4C46;
					}

					&.second {
						background: #F49F42;
					}

					&.third {
						background: #EEDD78;
					}

					&.fourth {
						background: #3090B8;
					}
				}

				.task_risk_header_title {
					float: left;
					color: #32C6C4;
				}

				.task_risk_header_right {
					float: right;
					font-size: 12px;

					.step_plane_time_cutover {
						display: flex;
						justify-content: end;
						margin-top: 10px;
						cursor: pointer;
						position: relative;
					}

					.step_plane_time {
						font-size: 12px;

						img {
							vertical-align: middle;
							width: 15px;
							height: 15px;
							margin-right: 5px;
						}

						span {
							color: #429CAB;
							vertical-align: middle;
						}
					}
				}

			}

			&>div {
				display: inline-block;
				color: #fff;
				box-sizing: border-box;
			}

			.task_risk_left {
				width: 20%;
				height: 100%;
				box-sizing: border-box;
			}

			.task_risk_right {
				width: 79%;
				height: 100%;
				box-sizing: border-box;
			}
		}
</style>
